<!--
 * @Description: 物料维护
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-04-26 20:47:16
 * @FilePath: /yuxiuproweb/src/views/process/model/mods/maintenance/index.vue
-->
<template>
  <el-drawer title="物料维护" size="100%" :visible.sync="shows">
    <div class="app-container drawer-form">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['md:fabric:add']"
            >新增</el-button
          >
        </el-col>
      </el-row>
      <el-form ref="form" :model="form" :rules="rules" inline size="mini">
        <el-table
          v-loading="loading"
          :data="fabricList"
          :max-height="700"
          size="mini"
        >
          <el-table-column
            label="配料类型"
            align="center"
            prop="type"
            min-width="120"
          >
            <template slot-scope="{ row }">
              <template v-if="row.editState">
                <el-form-item prop="type">
                  <el-select
                    v-model="row.type"
                    placeholder="请选择"
                    @change="
                      row.usageProcess = null;
                      row.part = null;
                    "
                  >
                    <el-option label="面料" value="0" />
                    <el-option label="辅料" value="1" />
                  </el-select>
                </el-form-item>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            label="用料环节"
            align="center"
            prop="usageProcess"
            min-width="120"
          >
            <template slot-scope="{ row }">
              <template v-if="row.editState">
                <el-form-item prop="usageProcess">
                  <el-select v-model="row.usageProcess" placeholder="请选择">
                    <template v-if="row.type === '0'">
                      <el-option label="下料" value="0" />
                    </template>
                    <template v-else-if="row.type === '1'">
                      <el-option label="加工" value="1" />
                      <el-option label="配货" value="2" />
                    </template>
                  </el-select>
                </el-form-item>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            label="位置"
            align="center"
            prop="part"
            min-width="120"
          >
            <template slot-scope="{ row }">
              <template v-if="row.editState">
                <el-form-item prop="part">
                  <el-select v-model="row.part" placeholder="请选择">
                    <template v-if="row.type === '0'">
                      <el-option
                        v-for="item in dict.type
                          .md_complex_machining_model_part_1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </template>
                    <template v-else-if="row.type === '1'">
                      <el-option
                        v-for="item in dict.type
                          .md_complex_machining_model_part_2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </template>
                  </el-select>
                </el-form-item>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            label="条件"
            align="center"
            prop="processingMethodIds"
            min-width="450"
          >
            <template slot-scope="{ row }">
              <template v-if="row.editState">
                <el-form-item prop="processingMethodIds">
                  <el-select
                    v-model="row.processingMethodIds"
                    placeholder="请选择"
                    style="width: 120px"
                    multiple
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in methodList"
                      :key="item.processingMethodId"
                      :label="item.name"
                      :value="item.processingMethodId"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item prop="widthLt">
                  <el-input
                    style="width: 80px"
                    v-model="row.widthLt"
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item><span>≤ 窗帘宽度 ≤</span></el-form-item>

                <el-form-item prop="widthGt">
                  <el-input
                    style="width: 80px"
                    v-model="row.widthGt"
                    placeholder="请输入"
                  />
                </el-form-item>
              </template>
            </template>
          </el-table-column>

          <el-table-column
            label="是否自动拆单"
            align="center"
            prop="isAutomaticOrderSplitting"
            min-width="120"
          >
            <template slot-scope="{ row }">
              <el-checkbox
                v-model="row.isAutomaticOrderSplitting"
                true-label="Y"
                false-label="N"
                >自动</el-checkbox
              >
            </template>
          </el-table-column>

          <el-table-column
            label="配料用量"
            align="center"
            prop="pleatNumber"
            min-width="500"
          >
            <template slot-scope="{ row }">
              <template v-if="row.editState">
                <el-form-item prop="pleatNumber" label="褶子数">
                  <el-input
                    style="width: 80px"
                    v-model="row.pleatNumber"
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item prop="spaceBetween" label="固定">
                  <el-input
                    style="width: 80px"
                    v-model="row.spaceBetween"
                    placeholder="请输入"
                  />
                  米
                </el-form-item>
                <el-form-item prop="proportion" label="比例">
                  <el-input
                    style="width: 80px"
                    v-model="row.proportion"
                    placeholder="请输入"
                  />
                  %
                </el-form-item>
              </template>
            </template>
          </el-table-column>

          <el-table-column
            label="影响主布用量"
            align="center"
            prop="pleatNumber"
            min-width="550"
          >
            <template slot-scope="{ row }">
              <template v-if="row.editState">
                <el-form-item prop="subPleatNumber" label="固定减褶数">
                  <el-input
                    style="width: 80px"
                    v-model="row.subPleatNumber"
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item prop="subSpaceBetween" label="固定减">
                  <el-input
                    style="width: 80px"
                    v-model="row.subSpaceBetween"
                    placeholder="请输入"
                  />
                  米
                </el-form-item>
                <el-form-item prop="subProportion" label="用料系数减">
                  <el-input
                    style="width: 80px"
                    v-model="row.subProportion"
                    placeholder="请输入"
                  />
                  %
                </el-form-item>
              </template>
            </template>
          </el-table-column>

          <!-- <el-table-column
            label="商品复杂模型id"
            align="center"
            prop="complexMachiningModelId"
          /> -->
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            min-width="130"
            fixed="right"
          >
            <template slot-scope="{ row, $index }">
              <template v-if="row.editState">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(row)"
                  >保存</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(row, $index)"
                  >删除</el-button
                >
              </template>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import {
  listFabric,
  delFabric,
  addFabric,
  updateFabric,
} from "@/api/process/model";
import { listMethod } from "@/api/process/way";
import { FIELDS } from "@/views/process/way/configure";

const MAINTENANCE = {
  mdComplexMachiningModelFabricId: null,
  type: null,
  usageProcess: null,
  part: null,
  processingMethodIds: null,
  widthLt: null,
  widthGt: null,
  isAutomaticOrderSplitting: "N",
  pleatNumber: null,
  spaceBetween: null,
  proportion: null,
  subPleatNumber: null,
  subSpaceBetween: null,
  subProportion: null,
  // sort: null,
  complexMachiningModelId: null,
};

export default {
  dicts: [
    "md_complex_machining_model_part_1",
    "md_complex_machining_model_part_2",
  ],
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 窗帘复杂加工-物料维护表格数据
      fabricList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      methodList: [],
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  created() {
    this.getList();
    this.getMethodList();
  },
  methods: {
    getMethodList() {
      listMethod({
        pageNum: 1,
        pageSize: 500,
      }).then(({ rows }) => {
        this.methodList = rows?.map((e) => {
          return {
            ...e,
            name: `${this.getTypeName(FIELDS, e.field)}-${
              e.processingMethodName
            }`,
          };
        });
      });
    },
    /** 查询窗帘复杂加工-物料维护列表 */
    getList() {
      listFabric({
        ...this.queryParams,
        complexMachiningModelId: this.data.mdComplexMachiningModelId,
      }).then((response) => {
        this.fabricList = response.rows?.map((e) => ({
          ...e,
          editState: true,
          processingMethodIds: (e.processingMethodIds
            ? e.processingMethodIds?.split(",")
            : []
          )?.map((e) => +e),
        }));
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.fabricList.push({
        ...MAINTENANCE,
        editState: true,
      });
    },
    /** 保存按钮操作 */
    handleUpdate(row) {
      row.complexMachiningModelId = this.data.mdComplexMachiningModelId;
      row.processingMethodIds = row.processingMethodIds.join();
      if (row.mdComplexMachiningModelFabricId != null) {
        updateFabric(row).then(() => {
          this.$modal.msgSuccess("修改成功");
          this.getList();
        });
      } else {
        addFabric(row).then(() => {
          this.$modal.msgSuccess("新增成功");
          this.getList();
        });
      }
    },
    /** 删除按钮操作 */
    handleDelete(row, index) {
      const mdComplexMachiningModelFabricIds =
        row.mdComplexMachiningModelFabricId;
      this.$modal
        .confirm("是否删除当前项")
        .then(function () {
          return mdComplexMachiningModelFabricIds !== null
            ? delFabric(mdComplexMachiningModelFabricIds)
            : new Promise((resolve) => resolve(true));
        })
        .then(() => {
          this.fabricList.splice(index, 1);
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.drawer-form {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
      input {
        text-align: left;
      }
    }
  }
}
</style>
